<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>流浪动物管理系统</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/public.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <div class="quan">
        <div id="div1">
            <img src="images/beijing2.jpg">
        </div>
        <!--头部-->
        <header class="publicHeader">
            <h1>流浪动物管理系统</h1>
            <div class="publicHeaderR">
                <p><span>你好！</span><span style="color: #b0fa31"> 管理员</span> , 欢迎你！</p>
                <a href="jsp/logout.do">退出</a>
            </div>
        </header>
        <!--时间-->
        <section class="publicTime">
            <span id="time">2015年1月1日 11:11  星期一</span>
            <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
        </section>
        <!--主体内容-->
        <section class="publicMian ">
            <div class="left">
                <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
                <nav>
                    <ul class="list">
                        <li><a href="jsp/bill.do?method=query">动物管理</a></li>
                        <li><a href="jsp/provider.do?method=query">领养管理</a></li>
                        <li><a href="user.html">用户管理</a></li>
                        <li><a href="update_pass.html">密码修改</a></li>
                        <li><a href="#" @click="logout">退出系统</a></li>
                    </ul>
                </nav>
            </div>
            <input type="hidden" id="path" name="path" value="/WAMS"/>
            <input type="hidden" id="referer" name="referer"
                   value="http://localhost:8080jsp/provider.do?method=query&queryProCode=&queryProName="/>
            <div class="right">
                <div class="location">
                    <strong>你现在所在的位置是:</strong>
                    <span>用户管理页面</span>
                </div>
                <div class="search">
                    <span>用户名：</span>
                    <input name="queryname" class="input-text" type="text" v-model="userName">

                    <span>动物种类：</span>
                    <select name="queryUserRole" v-model="userRole">

                        <option value="0">--请选择--</option>

                        <option value="1">管理员</option>

                        <option value="2">兽医</option>

                        <option value="3">员工</option>


                    </select>

                    <input value="查 询" type="submit" id="searchbutton" @click="searchUser">
                    <a href="user_save.html">添加用户</a>
                </div>
                <!--用户-->
                <table class="providerTable" cellpadding="0" cellspacing="0">
                    <tr class="firstTr">
                        <th width="10%">用户编码</th>
                        <th width="20%">用户名称</th>
                        <th width="10%">性别</th>
                        <th width="10%">年龄</th>
                        <th width="10%">电话</th>
                        <th width="10%">用户角色</th>
                        <th width="30%">操作</th>
                    </tr>
                    <!--循环遍历行-->
                    <tr v-for="u in users">
                        <td>
                            <span>{{u.userCode}}</span>
                        </td>
                        <td>
                            <span>{{u.userName}}</span>
                        </td>
                        <td>
                            <span>{{u.gender == 1 ? '女' : '男'}}</span>
                        </td>
                        <td>
                            <span>{{u.userAge}}</span>
                        </td>
                        <td>
                            <span>{{u.phone}}</span>
                        </td>
                        <td>
                            <span>{{u.roleName}}</span>
                        </td>
                        <td>

                            <span>
                                <a class="viewUser" href="#" @click="showUser(u)">
                                <img src="images/read2.png" alt="查看" title="查看"/>
                            </a>
                            </span>
                            <span>
                                <a class="modifyUser" href="#" @click="updateUser(u)">
                                    <img src="images/xiugai2.png" alt="修改" title="修改"/>
                                </a>
                            </span>
                            <span>
                                <a class="deleteUser" href="#" @click="deleteUser(u.id)">
                                    <img src="images/schu2.png" alt="删除" title="删除"/>
                                </a>
                            </span>
                        </td>
                    </tr>
                </table>
                <div style="text-align: center">
                    <el-pagination
                            background
                            page-size="5"
                            layout="prev, pager, next"
                            :total="result.total" @current-change="loadAllUserData">
                    </el-pagination>
                </div>
            </div>
        </section>

        <!--点击删除按钮后弹出的页面-->
        <div class="zhezhao"></div>
        <div class="remove" id="removeUse">
            <div class="removerChid">
                <h2>提示</h2>
                <div class="removeMain">
                    <p>你确定要删除该用户吗？</p>
                    <a href="#" id="yes">确定</a>
                    <a href="#" id="no">取消</a>
                </div>
            </div>
        </div>


        <footer class="footer">
            版权归关老师
        </footer>
    </div>
</div>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="calendar/WdatePicker.js"></script>
</body>
</html>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                result: {},
                users: [],
                userName: '',//跟文本框绑定的变量
                userRole: 0//跟下拉菜单绑定的变量
            }
        },
        methods: {
            // 加载所有用户信息
            loadAllUserData(page) {
                axios({
                    method: 'get',
                    url: 'user/find',
                    // 	传递的页面
                    params: {
                        page: page
                    }
                }).then(resp => {
                    // 集合、总条数、总页数等
                    this.result = resp.data
                    // 集合
                    this.users = this.result.list
                })
            },
            // 	删除用户的函数
            deleteUser(uid) {
                // 引入饿了么
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 	这里是点击确定后的内容
                    axios({
                        url: 'user/delete',
                        params: {
                            id: uid
                        }
                    }).then(resp => {
                        if (resp.data == 1) {
                            // 刷新
                            this.loadAllUserData()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 搜索用户
            searchUser() {
                axios({
                    url: 'user/find_name',
                    params: {
                        userName: this.userName,
                        userRole: this.userRole
                    }
                }).then(resp => {
                    this.users = resp.data
                })
            },
            // 	查看用户
            showUser(user) {
                // 	将user保存下来
                let key = 'USER'
                let value = JSON.stringify(user)//将对象转换成字符串
                sessionStorage.setItem(key, value)
                // 	跳转到显示页面
                location.href = 'user_show.html'
            },
            // 	跳转到修改页面并传递需要修改的内容
            updateUser(user) {
                // 	将user保存下来
                let key = 'USER'
                let value = JSON.stringify(user)//将对象转换成字符串
                sessionStorage.setItem(key, value)
                // 	跳转到显示页面
                location.href = 'user_update.html'
            },
            logout() {

                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: 'user/logout'
                    }).then(resp => {
                        location.href = 'login.html'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            }
        },
        created() {
            this.loadAllUserData(1)
        }
    })
</script>

